<template>
	<view>
		<view class="form_box">
			<view class="form_item flex">
				<view class="label">
					联系人
				</view>
				<view class="input">
					<u--input placeholder="收件人" placeholderStyle='color:#999999;' border='none' v-model="form.username">
					</u--input>
				</view>
				<image class="right_icon" src="./static/phonebook.png" mode=""></image>
			</view>
			<view class="form_item flex">
				<view class="label">
					联系电话
				</view>
				<view class="input">
					<u--input placeholder="联系电话" placeholderStyle='color:#999999;' border='none' v-model="form.mobile">
					</u--input>
				</view>
			</view>
			<view class="form_item flex">
				<view class="label">
					选择地区
				</view>
				<view class="input" @click="show=true">
					<u--input placeholder="省市区" readonly placeholderStyle='color:#999999;' border='none'
						v-model="form.addr"></u--input>
				</view>
				<image @click="chooseaddr" class="right_icon1" src="./static/dw.png" mode=""></image>
			</view>
			<view class="form_item flex" style="align-items: flex-start;">
				<view class="label">
					详细地址
				</view>
				<view class="input">
					<!-- <u--input placeholder="街道门牌信息" placeholderStyle='color:#999999;' border='none'
						v-model="form.detail"></u--input> -->
					<u--textarea confirmType='done' v-model="form.addrdetail" placeholderStyle='color:#999999;'
						placeholder="街道门牌信息" autoHeight border='none'></u--textarea>
				</view>
			</view>
		</view>
		<view class="caozbox flex" @click="checkdefault">
			<view class="">
				设为默认地址
			</view>
			<view class="check_box">
				<image v-if="form.is_default" class="check_icon" src="./static/check.png" mode=""></image>
			</view>
		</view>
		<view class="footer">
			<view class="btn" @click="toaddr">
				{{btn_title}}
			</view>
		</view>
		<u-picker :show="show" ref="uPicker" :loading="loading" keyName='fullname' :columns="columns" @confirm="confirm"
			@change="changeHandler" @cancel='show=false'></u-picker>
	</view>
</template>

<script>
	const QQMapWX = require('../../common/qqmap-wx-jssdk.js');
	// 实例化API核心类
	// #ifdef MP
	const chooseLocation = requirePlugin('chooseLocation');
	// #endif
	import {
		insertAddress,
		getAddressById,
		editAddress
	} from '@/api/my.js'
	export default {
		data() {
			return {
				form: {
					username: '',
					mobile: '',
					addr: '',
					detail: '',
					is_default: 0,
					province: '',
					city: '',
					area: ''
				},
				ismr: true,
				id: null,
				items: [],
				show: false,
				columns: [],
				columnData: [],
				loading: false,
				qqmapsdk: null,
				btn_title: ''
			};
		},
		methods: {
			checkdefault() {
				this.ismr = !this.ismr
				if (this.ismr) {
					this.form.is_default = 0
				} else {
					this.form.is_default = 1
				}
			},
			changeHandler(e) {
				let _this = this
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					_this.loading = true
					this.qqmapsdk.getDistrictByCityId({
						// 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
						id: _this.columns[0][index].id, //对应接口getCityList返回数据的Id，如：北京是'110000'
						success: function(res) { //成功后的回调
							// console.log(res);
							// console.log('对应城市ID下的区县数据(以北京为例)：', res.result[0]);
							picker.setColumnValues(1, res.result[0])
							_this.loading = false
							// console.log(res.result[0][0])
							_this.qqmapsdk.getDistrictByCityId({
								// 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
								id: res.result[0][0].id, //对应接口getCityList返回数据的Id，如：北京是'110000'
								success: function(res) { //成功后的回调
									// console.log(res);
									// console.log('对应城市ID下的区县数据(以北京为例)：', res.result[0]);
									picker.setColumnValues(2, res.result[0])
								},
								fail: function(error) {
									console.error(error);
								},
								complete: function(res) {
									console.log(res);
								}
							});
						},
						fail: function(error) {
							console.error(error);
						},
						complete: function(res) {
							console.log(res);
						}
					});
				}
				console.log(columnIndex)
				if (columnIndex === 1) {
					this.qqmapsdk.getDistrictByCityId({
						// 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
						id: value[1].id, //对应接口getCityList返回数据的Id，如：北京是'110000'
						success: function(res) { //成功后的回调
							// console.log(res);
							// console.log('对应城市ID下的区县数据(以北京为例)：', res.result[0]);
							picker.setColumnValues(2, res.result[0])
						},
						fail: function(error) {
							console.error(error);
						},
						complete: function(res) {
							console.log(res);
						}
					});
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', e)
				this.show = false
				this.form.addr = e.value[0].fullname + e.value[1].fullname + e.value[2].fullname
				this.form.province = e.value[0].fullname
				this.form.city = e.value[1].fullname
				this.form.area = e.value[2].fullname
			},
			toaddr() {
				this.form.detail = this.form.addr + this.form.addrdetail
				let {
					username,
					mobile,
					detail,
					is_default,
					province,
					city,
					area,
					addr,
					addrdetail
				} = this.form
				if (!username) {
					uni.$u.toast('请输入联系人')
					return
				}
				if (!mobile) {
					uni.$u.toast('请输入手机号码')
					return
				}
				if (!addr) {
					uni.$u.toast('请选择地区')
					return
				}
				if (!addrdetail) {
					uni.$u.toast('请输入详细地址')
					return
				}
				// 修改
				if (this.id) {
					editAddress({
						username,
						mobile,
						detail,
						is_default,
						province,
						city,
						area,
						id: this.id
					}).then(res => {
						// console.log(res.data)
						if (res.data.code == 1) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 500)
						}
					})
				} else { // 新增
					insertAddress({
						username,
						mobile,
						detail,
						is_default,
						province,
						city,
						area
					}).then(res => {
						// console.log(res.data)
						if (res.data.code == 1) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 500)
						}
					})
				}

			},
			getaddrinfo(id) {
				getAddressById({
					id
				}).then(res => {
					this.form = res.data.data
					this.form.addr = this.form.province + this.form.city + this.form.area
					this.form.addrdetail=this.form.detail.replace(this.form.addr,'')
					// console.log(this)
					// console.log(this.form.detail.replace(this.form.addr,''))
				})
			},
			chooseaddr() {
				// 地图插件
				const key = this.$mapkey; //使用在腾讯位置服务申请的key
				const referer = '商城'; //调用插件的app的名称
				const location = JSON.stringify({
					latitude: '',
					longitude: ''
				});
				const category = '';
				wx.navigateTo({
					url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&category=' +
						category
				});
			}
		},
		onLoad(option) {
			var _this = this;
			this.qqmapsdk = new QQMapWX({
				key: this.$mapkey // 必填
			});
			//调用获取城市列表接口
			uni.showLoading()
			this.qqmapsdk.getCityList({
				success: function(res) { //成功后的回调
					var city = res.result[0];
					//根据对应接口getCityList返回数据的Id获取区县数据（以北京为例）
					_this.columns[0] = city
					_this.qqmapsdk.getDistrictByCityId({
						// 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
						id: city[0].id, //对应接口getCityList返回数据的Id，如：北京是'110000'
						success: function(res) { //成功后的回调
							uni.hideLoading()
							// console.log(res);
							// console.log('对应城市ID下的区县数据(以北京为例)：', res.result[0]);
							_this.columns[1] = res.result[0]
							_this.qqmapsdk.getDistrictByCityId({
								// 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
								id: _this.columns[1][0]
									.id, //对应接口getCityList返回数据的Id，如：北京是'110000'
								success: function(res) { //成功后的回调
									// console.log(res);
									// console.log('对应城市ID下的区县数据(以北京为例)：', res.result[0]);
									_this.columns[2] = res.result[0]
								},
								fail: function(error) {
									console.error(error);
								},
								complete: function(res) {
									console.log(res);
								}
							});
						},
						fail: function(error) {
							console.error(error);
						},
						complete: function(res) {
							console.log(res);
						}
					});
				},
				fail: function(error) {
					console.error(error);
				},
				complete: function(res) {
					console.log(res);
				}
			});
			this.id = option.id
			if (option.id) {
				this.getaddrinfo(option.id)
				this.btn_title = '确认修改'
			} else {
				this.btn_title = '确认添加'
			}
		},
		onShow() {
			if (chooseLocation.getLocation()) {
				const location = chooseLocation.getLocation();
				// console.log(location)
				this.form.province = location.province
				this.form.city = location.city
				this.form.area = location.district
				this.form.addrdetail = location.name
				this.form.addr = location.province + location.city + location.district
			}

		}
	}
</script>

<style lang="less">
	page {
		background-color: #F7F6F6;
	}

	.form_box {
		padding: 7rpx 36rpx 0 30rpx;
		border-top: 2rpx solid #F7F6F6;
		background-color: #fff;
		margin-bottom: 19rpx;

		.form_item {
			padding: 32rpx 0;
			border-bottom: 1rpx solid #EEEEEE;

			.label {
				font-size: 30rpx;
				color: #333333;
				width: 176rpx;
			}

			.input {
				flex: 1;
				font-size: 30rpx;
			}

			.right_icon {
				width: 41rpx;
				height: 41rpx;
			}

			.right_icon1 {
				width: 35rpx;
				height: 40rpx;
			}
		}

		.nb {
			border: 0;
		}
	}

	.caozbox {
		// width: 745px;
		padding: 0 30rpx;
		line-height: 95rpx;
		background: #FFFFFF;
		color: #333333;
		font-size: 30rpx;
		justify-content: space-between;
		align-items: center;
		.check_box {
			width: 31rpx;
			height: 31rpx;
			border: 1rpx solid #AEAEAE;
			border-radius: 50%;
			position: relative;

			.check_icon {
				width: 31rpx;
				height: 31rpx;
				position: absolute;
				top: 0rpx;
				left: 0rpx;
			}
		}
	}

	.footer {
		padding: 0 30rpx 0;
		// background-color: #fff;
		position: fixed;
		width: 690rpx;
		bottom: 88rpx;

		.btn {
			line-height: 114rpx;
			background: linear-gradient(153deg, #FF8717, #FF5F00);
			border-radius: 57rpx;
			text-align: center;
			font-size: 36rpx;
			color: #fff;
		}
	}

	/deep/.u-textarea {
		padding: 0 !important;
	}
</style>
